:root {
    --color-pink-light: var(--vp-c-brand-1); /* 定义亮色主题下的滚动条颜色 */
}

html[data-theme="dark"] {
    --color-green-light: #322d31; /* 定义暗色主题下的滚动条颜色 */
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.3rem;
}

::-webkit-scrollbar-track {
    border-radius: 2em;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background-color: var(--color-pink-light);
    background-image: -webkit-linear-gradient(
        45deg,
        hsla(0, 0%, 100%, 0.4) 25%,
        transparent 0,
        transparent 50%,
        hsla(0, 0%, 100%, 0.4) 0,
        hsla(0, 0%, 100%, 0.4) 75%,
        transparent 0,
        transparent
    );
    border-radius: 2em;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
    background-image: -webkit-linear-gradient(
        45deg,
        hsla(0, 0%, 100%, 0.4) 25%,
        transparent 0,
        transparent 50%,
        hsla(0, 0%, 100%, 0.4) 0,
        hsla(0, 0%, 100%, 0.4) 75%,
        transparent 0,
        transparent
    );
    border-radius: 2em;
}
